<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="timer"></div>
    <button id="btn">清除执行</button>
</body>
<script>
    /*
        在页面上生成动态时钟 2021-10-19 11：48：30
        setInterval()
    */
    function identify(num){
        return num<10? "0"+num :num;
    }
    function creatTimer(){
        var timer1 = new Date();
        var year = timer1.getUTCFullYear();
        var month = timer1.getMonth()+1;
        var date = timer1.getDate();
        var hour = timer1.getHours();
        var min = timer1.getMinutes();
        var sec = timer1.getSeconds();
        return year+"-"+month+"-"+date+" "+hour+":"+identify(min)+":"+identify(sec)+"<br/>";
    }
   
    var timerId = setInterval(function(){
        var result = creatTimer();
        var timer = document.getElementById("timer");
        timer.innerHTML = result;
   },1000)

   var btn = document.getElementById("btn");
   btn.onclick = function(){
       clearInterval(timerId);
   }

</script>
</html>